<script type="text/javascript">
// Col : y
var col = 1;
// row : x
var row = 1;
// Item
var item = 0;
var text= '<br>';
function print_data (data) {
	
	for( var i = 0 ; i < data[1].length ; i++){
		var className = '.dashboard-col-' + col ;
		item++;
		
		$( className).append(' <div class="dashboard" data-group="'+ data[0]+'" rel="' + item + '"> <div class="block"> danh muc : <b>' + data[0] + '</b><hr> <br>Row : '+ row + ' Col : '+ col + ' item : '+ item + text+'<br> Gia tri : ' +data[1][i]+'</div></div>');
		text+= '<br>';
		if (col < 3) { col++; }
		else { col = 1 ; row++ ;}
	}
}

$(document).ready(function() {
	// Number data : z
	// Number data : z
	var test = ['test',[1,123,234124,124124324,234234]];
	var profile =['profile',[11,12,13,14,15,16,17,18]];
	var photo =['photo',['Khong ',' biet',' co',' duoc', ' khong']];
	var sothich =['sothich',[' cu', ' thu', ' truoc', ' da', ' tinh' , ' sau']];

	var data = [];
	data.push(test);
	data.push(profile);
	data.push(photo);
	data.push(sothich);

	var select = "profile";
	for(var i = 0; i < data.length; i++)
	{
		if(data[i][1].length > 0){
			switch (data[i][0]) {
				case 0 :
					console.log("khong co j het");
					break;
			    case select:
			    	print_data(data[i]);
			    	data[i] = [[],[]];
			    	for(var j = 0 ; j < data.length; j ++){
			    		print_data(data[j]);
			    	}
			        break;
			    default:
			    	break;
			}
		}
	}

	
	$('.btn_change_html').click( function () {
		$('.dashboard-col').
		col = 1;
		row = 1;
		var group = $(this).data('group');
		var div = $('.dashboard[data-group="'+group+'"]');
		$('.dashboard[data-group="'+group+'"]').remove();
		var column;
		// Su dung thuat toan sui bot sap sep cac thanh phan trong mang theo thu tu
		for(var i = 0 ; i < div.length; i++) {
			if(i != div.length){
				for(var j = i ; j < div.length; j++){
					var Num_a = $(div[i]).attr('rel');
					var Num_b = $(div[j]).attr('rel');
					if( parseInt(Num_a) > parseInt(Num_b) ){
						var a = div[i];
						div[i] = div[j];
						div[j] = a;
					}
				}
			}
		}
		// vong lap for sap sep lai thuat toan tren html
		for( var i = 0  ; i < div.length  ; i++){
			var className = '.dashboard-col-' + col ;
			column   = $(className)[0];
			var node = column.childNodes[row];
			column.insertBefore(div[i],node);

			if (col < 3) { col++; }
			else { col = 1 ; row++ ;}
		}

		//list.insertBefore(list.lastChild,list.childNodes[0]);
	});
});

</script>
<style>
	.hide {display: none;}
	.comment {
		width: 100%;
		min-height: 235px;
		background: #CCC;
		align-items: baseline;
		vertical-align: top;
		display: flex;
		flex: 0 1 auto;
	}
	.cm {
		width: 100%;
	}
</style>
<div class="page-outer">
	<div class="page-container">
		<div class="dashboard-super-cover">
			<div class="dashboard-cover">
				<div class="block-cover">
					<p> </p>
					<p> </p>
					<p> </p>
					<p> </p>

				</div>
			</div>
		</div>

		<div class="dashboard-spacer">
			<button class="btn_change_html" data-group="profile">profile</button>
			<button class="btn_change_html" data-group="photo">photo</button>
			<button class="btn_change_html" data-group="test"> test</button>
			<button class="btn_change_html" data-group="sothich">sothich</button>
		</div>


		<div class="dashboard-col-1 a dashboard-col">
			<div class="dashboard" > 
				<div class="block"> danh muc : <b> + data[0] + </b><hr>
					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
				 <br>Row : '+ row + ' Col : '+ col + ' item : '+ item + text+<br> Gia tri : ' +data[1][i]+
				</div>
			</div>
		</div>


			<div class='dashboard-hot'>
				<div class="block-hot">
					<p>...Profile.......HOT.....</p>
					<p>...Profile.......HOT.....</p>		<div class="dashboard-col-2 dashboard-col">
			<div class="dashboard" > 
				<div class="block">
				<br><br>
				<br><br>
				<br><br>
					danh muc : <b> + data[0] + </b><hr> <br>Row : '+ row + ' Col : '+ col + ' item : '+ item + text+<br> Gia tri : ' +data[1][i]+
				</div>
			</div>
		</div>

		<div class="dashboard-col-3 dashboard-col">
			<div class="dashboard" > 
				<div class="block">
				
				</div>
			</div>
		</div>
<!--
		<div class="dashboard-hot-col">
					<p>...Profile.......HOT.....</p>
					<p>...Profile.......HOT.....</p>
					<p>...Profile.......HOT.....</p>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="dashboard-col-1 dashboard-col">
			
		</div>

		<div class="dashboard-col-2 dashboard-col">
			
		</div>

		<div class="dashboard-col-3 dashboard-col">
			
		</div>
-->
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>